import { Drawer, message, Popconfirm, Row } from 'antd';
import React, { useRef, useState } from 'react';
import ProForm, { ProFormCheckbox, ProFormSelect } from '@ant-design/pro-form';
import request from '@/utils/request';
import ProTable from '@ant-design/pro-table';

const status = {
  true: '√',
  false: 'x',
};

const AuthModal = ({ fid, visible, onCancel, dispatch }) => {
  const actionRef = useRef();

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      copyable: true,
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '帐号',
      dataIndex: 'username',
      copyable: true,
      ellipsis: true,
    },
    {
      title: '可编辑',
      dataIndex: 'edit',
      render: (text, record) => status[record.edit],
    },
    {
      title: '可下载',
      dataIndex: 'download',
      render: (text, record) => status[record.download],
    },
    {
      title: '可打印',
      dataIndex: 'print',
      render: (text, record) => status[record.print],
    },
    {
      title: '可查看',
      dataIndex: 'review',
      render: (text, record) => status[record.review],
    },
    {
      title: '创建时间',
      dataIndex: 'createAt',
      valueType: 'datetime',
      width: 180,
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record) => (
        <Popconfirm
          key="del"
          title="确认要恢复移出此账号嘛?"
          onConfirm={async () => {
            const response = await request('/eofficeserver/api/folder/auth', {
              method: 'delete',
              data: { id: record.id },
            });
            if (response.success) {
              actionRef.current.reload();
            }
          }}
        >
          <a href="#">移除</a>
        </Popconfirm>
      ),
    },
  ];

  return (
    <Drawer
      visible={visible}
      title="授权"
      forceRender={true}
      destroyOnClose={true}
      closable={true}
      maskClosable={false}
      onClose={onCancel}
      width={1024}
    >
      <Row>
        <ProForm
          layout="horizontal"
          onFinish={async (values) => {
            const response = await request('/eofficeserver/api/folder/auth', {
              method: 'post',
              data: { ...values, fid },
            });
            if (response.success) {
              actionRef.current.reload();
            }
          }}
        >
          <ProFormSelect
            name="uid"
            label="账号"
            showSearch
            request={async ({ keyWords }) => {
              if (keyWords) {
                const response = await request('/eofficeserver/api/user/search', {
                  params: { k: keyWords },
                });
                if (response.success) {
                  return response.data.map((item) => {
                    return { label: `${item.nickname} - ${item.username}`, value: item.uid };
                  });
                }
              }
              return [];
            }}
          />
          <ProFormCheckbox.Group
            name="perms"
            label="权限列表"
            options={[
              { value: 'edit', label: '可编辑' },
              { value: 'download', label: '可下载' },
              { value: 'print', label: '可打印' },
              { value: 'review', label: '可查看' },
            ]}
          />
        </ProForm>
      </Row>
      <Row>
        <ProTable
          columns={columns}
          actionRef={actionRef}
          request={async (params, sort, filter) => {
            const response = await request('/eofficeserver/api/folder/auth', {
              params: { ...filter, ...params, fid },
            });

            if (!response.success) {
              return {
                data: [],
                // success 请返回 true，
                // 不然 table 会停止解析数据，即使有数据
                success: true,
                // 不传会使用 data 的长度，如果是分页一定要传
                total: 0,
              };
            }

            return {
              data: response.data.list,
              // success 请返回 true，
              // 不然 table 会停止解析数据，即使有数据
              success: true,
              // 不传会使用 data 的长度，如果是分页一定要传
              total: response.data.pagination.total,
            };
          }}
          rowKey="id"
          search={false}
          pagination={{
            showQuickJumper: true,
          }}
          dateFormatter="string"
        />
      </Row>
    </Drawer>
  );
};
export default AuthModal;
